<template>
  <md-main class="md-pages-system-cloud-config">
    <div class="md-body">
      <el-tabs v-model="current" stretch @tab-click="handleTabsClick">
        <template v-for="item in dictData['sys_sms_platform']">
          <el-tab-pane :label="item.dictLabel" :name="item.dictValue" :key="item.dictValue" />
        </template>
      </el-tabs>

      <template v-if="current==='1'">
        <el-form :model="aliSmsRequest" ref="aliSmsForm" size="small">
          <el-form-item label="accessKeyId" prop="accessKeyId">
            <el-input v-model="aliSmsRequest.accessKeyId" placeholder="请填写accessKeyId" />
          </el-form-item>
          <el-form-item label="accessSecret" prop="accessSecret">
            <el-input v-model="aliSmsRequest.accessSecret" placeholder="请填写accessSecret" />
          </el-form-item>
          <el-form-item label="地域" prop="region">
            <el-input v-model="aliSmsRequest.region" placeholder="请填写地域" />
          </el-form-item>
          <el-form-item label="地域域名" prop="endpoint">
            <el-input v-model="aliSmsRequest.endpoint" placeholder="请填写地域域名" />
          </el-form-item>
          <el-form-item label="签名名称" prop="signName">
            <el-input v-model="aliSmsRequest.signName" placeholder="请填写签名名称" />
          </el-form-item>
          <el-form-item label="模版" prop="templateCode">
            <el-input v-model="aliSmsRequest.templateCode" readonly placeholder="请请选择模版">
              <template slot="append">
                <el-button>选择模版</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </template>
      <template v-if="current==='2'">
        <el-form :model="tengXunSmsRequest" ref="tengXunSmsForm" size="small">
          <el-form-item label="appId" prop="appId">
            <el-input v-model="tengXunSmsRequest.appId" placeholder="请填写appId" />
          </el-form-item>
          <el-form-item label="secretId" prop="secretId">
            <el-input v-model="tengXunSmsRequest.secretId" placeholder="请填写secretId" />
          </el-form-item>
          <el-form-item label="secretKey" prop="secretKey">
            <el-input v-model="tengXunSmsRequest.secretKey" placeholder="请填写secretKey" />
          </el-form-item>
          <el-form-item label="sdkAppId" prop="sdkAppId">
            <el-input v-model="tengXunSmsRequest.sdkAppId" placeholder="请填写sdkAppId" />
          </el-form-item>
          <el-form-item label="appKey" prop="appKey">
            <el-input v-model="tengXunSmsRequest.appKey" placeholder="请填写appKey" />
          </el-form-item>
          <el-form-item label="地域" prop="region">
            <el-input v-model="tengXunSmsRequest.region" placeholder="请填写地域" />
          </el-form-item>
          <el-form-item label="地域域名" prop="endpoint">
            <el-input v-model="tengXunSmsRequest.endpoint" placeholder="请填写地域域名" />
          </el-form-item>
          <el-form-item label="签名名称" prop="signName">
            <el-input v-model="tengXunSmsRequest.signName" placeholder="请填写签名名称" />
          </el-form-item>
          <el-form-item label="模版" prop="templateCode">
            <el-input v-model="tengXunSmsRequest.templateCode" readonly placeholder="请请选择模版">
              <template slot="append">
                <el-button>选择模版</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </template>
      <template v-if="current==='3'">
        <el-form :model="huaWeiSmsRequest" ref="huaWeiSmsorm" size="small">
          <el-form-item label="accessKeyId" prop="accessKeyId">
            <el-input v-model="huaWeiSmsRequest.accessKeyId" placeholder="请填写accessKeyId" />
          </el-form-item>
          <el-form-item label="secretAccessKey" prop="secretAccessKey">
            <el-input v-model="huaWeiSmsRequest.secretAccessKey" placeholder="请填写secretAccessKey" />
          </el-form-item>
          <el-form-item label="appKey" prop="appKey">
            <el-input v-model="huaWeiSmsRequest.appKey" placeholder="请填写appKey" />
          </el-form-item>
          <el-form-item label="appSecret" prop="appSecret">
            <el-input v-model="huaWeiSmsRequest.appSecret" placeholder="请填写appSecret" />
          </el-form-item>
          <el-form-item label="短信签名通道号" prop="sender">
            <el-input v-model="huaWeiSmsRequest.sender" placeholder="请填写短信签名通道号" />
          </el-form-item>
          <el-form-item label="模版" prop="templateCode">
            <el-input v-model="huaWeiSmsRequest.templateCode" readonly placeholder="请请选择模版">
              <template slot="append">
                <el-button>选择模版</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </template>
    </div>

    <div class="footer">
      <md-button type="primary" size="small" :prems="['system:sms:save']" @click="handleSubmit()">保存</md-button>
    </div>
  </md-main>
</template>

<script>
import { insertConfig, updateConfig, listConfig } from '@/api/system/config.service.js'
import { mdGetDictData } from '@/ddd/dict.service.js'
export default {
  name: 'MdCloudConfigComponent',
  data () {
    return {
      current: '1',
      aliSmsRequest: { ...aliSmsRequest },
      tengXunSmsRequest: { ...tengXunSmsRequest },
      huaWeiSmsRequest: { ...huaWeiSmsRequest },
      request: { ...requestParams },
      configList: [],
      dictData: {}
    }
  },
  mounted () {
    mdGetDictData(['sys_sms_platform']).then(res => {
      this.dictData = res
      this.current = this.dictData['sys_sms_platform'].find(e => e.isDefault === 'Y').dictValue
    })

    this.getConfigData()
  },
  methods: {
    async getConfigData () {
      this.configList = []

      try {
        const res = await listConfig({
          configType: 'S',
          orderBy: 'create_time',
          isDesc: true
        })

        if (res.data && res.data.length > 0) {
          this.configList = res.data

          this.aliSmsRequest = { ...aliSmsRequest }
          const aLi = this.configList.find(e => e.configKey === 'sys_ali_yun_sms_config')
          if (aLi && aLi.configValue) {
            this.aliSmsRequest = JSON.parse(aLi.configValue)
          }

          this.tengXunSmsRequest = { ...tengXunSmsRequest }
          const tengXun = this.configList.find(e => e.configKey === 'sys_teng_xun_yun_sms_config')
          if (tengXun && tengXun.configValue) {
            this.tengXunSmsRequest = JSON.parse(tengXun.configValue)
          }

          this.huaWeiSmsRequest = { ...huaWeiSmsRequest }
          const huaWei = this.configList.find(e => e.configKey === 'sys_hua_wei_yun_sms_config')
          if (huaWei && huaWei.configValue) {
            this.huaWeiSmsRequest = JSON.parse(huaWei.configValue)
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleTabsClick () {
      try {
        if (this.current === '1') {
          this.aliSmsRequest = { ...aliSmsRequest }

          const aLi = this.configList.find(e => e.configKey === 'sys_ali_yun_sms_config')
          if (aLi && aLi.configValue) {
            this.aliSmsRequest = JSON.parse(aLi.configValue)
          }
        }

        if (this.current === '2') {
          this.tengXunSmsRequest = { ...tengXunSmsRequest }

          const tengXun = this.configList.find(e => e.configKey === 'sys_teng_xun_yun_sms_config')
          console.log(this.configList, tengXun)
          if (tengXun && tengXun.configValue) {
            this.tengXunSmsRequest = JSON.parse(tengXun.configValue)
          }
        }

        if (this.current === '3') {
          this.huaWeiSmsRequest = { ...huaWeiSmsRequest }

          const huaWei = this.configList.find(e => e.configKey === 'sys_hua_wei_yun_sms_config')
          if (huaWei && huaWei.configValue) {
            this.huaWeiSmsRequest = JSON.parse(huaWei.configValue)
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    async handleSubmit () {
      try {
        const params = Object.assign({}, { ...this.request })

        if (this.current === '1') {
          const configValue = Object.assign({}, { ...this.aliSmsRequest })

          params.configName = '阿里云-短信配置'
          params.configKey = configValue.configKey
          params.configValue = JSON.stringify(configValue)
          params.configType = 'S'
          params.remark = '应用于全局文件'
        }

        if (this.current === '2') {
          const configValue = Object.assign({}, { ...this.tengXunSmsRequest })

          params.configName = '腾讯云-短信配置'
          params.configKey = configValue.configKey
          params.configValue = JSON.stringify(configValue)
          params.configType = 'S'
          params.remark = '应用于全局文件'
        }

        if (this.current === '3') {
          const configValue = Object.assign({}, { ...this.huaWeiSmsRequest })

          params.configName = '华为云-短信配置'
          params.configKey = configValue.configKey
          params.configValue = JSON.stringify(configValue)
          params.configType = 'S'
          params.remark = '应用于全局文件'
        }

        const config = this.configList.find(e => e.configKey === params.configKey)

        if (config) {
          params.configId = config.configId
        }

        await (params.configId === undefined ? insertConfig : updateConfig)(params)

        this.$message.success('保存成功')

        this.getConfigData()
      } catch (error) {
        console.log(error)
      }
    }
  }
}

const requestParams = {
  configId: undefined,
  configName: undefined,
  configKey: undefined,
  configValue: undefined,
  configType: 'Y',
  remark: undefined
}

const aliSmsRequest = {
  configKey: 'sys_ali_yun_sms_config',
  accessKeyId: undefined, // AccessKeyId
  accessSecret: undefined, // AccessSecret
  region: undefined, // 地域
  endpoint: undefined, // 地域域名 // https://api.aliyun.com/product/Dysmsapi
  signName: undefined, // 签名
  templateCode: undefined // 模版CODE
}

const tengXunSmsRequest = {
  configKey: 'sys_teng_xun_yun_sms_config',
  appId: undefined,
  secretId: undefined, // secretId
  secretKey: undefined, // secretKey
  sdkAppId: undefined, // sdkAppId
  appKey: undefined, // appKey
  region: undefined, // 地域
  endpoint: undefined, // 地域域名 // 
  singName: undefined, // 签名
  templateCode: undefined // 模版CODE
}
// https://support.huaweicloud.com/devg-msgsms/sms_04_0005.html
const huaWeiSmsRequest = {
  configKey: 'sys_hua_wei_yun_sms_config',
  accessKeyId: undefined, // accessKeyId
  secretAccessKey: undefined, // secretAccessKey
  appKey: undefined, // appKey
  appSecret: undefined,// appSecret
  sender: undefined, // 国内短信签名通道号
  templateCode: undefined // 模版CODE
}
</script>

<style lang="less" scoped>
.md-pages-system-cloud-config {
  padding-bottom: 50px;
  ::v-deep .el-tabs {
    width: 500px;
    box-sizing: border-box;
    margin: 0px auto;
  }

  ::v-deep .el-form {
    width: 500px;
    box-sizing: border-box;
    margin: 0px auto;
    .el-form-item {
      margin-bottom: 8px !important;
    }
  }

  .footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    background-color: #fff;
    text-align: center;
    padding: 10px 0px;
    border-top: 1px solid #ececec;
  }
}
@media (max-width: 768px) {
  .md-pages-system-cloud-config {
    ::v-deep .el-tabs {
      width: 100%;
    }

    ::v-deep .el-form {
      width: 100%;
    }
  }
}
</style>